<template>
  <el-dialog title="编辑文章" width="80%" :visible.sync="dialogVisible" :before-close="handleClose">
	<el-form  ref="form" :model="form" label-width="120px" :rules="rules">	
	
	  <el-form-item label="文章编号" prop="id">
		<el-input v-model="form.id" :disabled="true" style="width: 60%;"></el-input>
	  </el-form-item>

	  <el-form-item label="文章标题" prop="title">
	  	<el-input v-model="form.title" clearable style="width: 60%;"></el-input>
	  </el-form-item>
	  
	  <el-form-item label="文章作者" prop="author">
	  	<el-input v-model="form.author" clearable style="width: 60%;"></el-input>
	  </el-form-item>
	  
	  <el-form-item label="文章内容" prop="content">
	  	<mavon-editor v-model = 'form.content'></mavon-editor>
	  </el-form-item>
	  
	  <el-form-item>
	  	<el-button type="primary" @click="saveArticle()">保 存</el-button>
	  	<el-button @click="reset()">重 置</el-button>
	  </el-form-item>
	</el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: 'updateDialog',
    data() {
      return {
		form: {
			id:'',
			title: '',
			author: '',
			content: ''
		},
        //表单验证规则
        rules: {
        	title: [
        		{required: true,message: '请输入文章标题',trigger: 'blur'},
        		{min: 1,max: 40,message: '长度在 1 到 40 个字符',trigger: 'blur'}
        	],
        	author: [
        		{required: true,message: '请输入作者,文章无出处即为佚名',trigger: 'blur'},
        		{min: 1,max: 20,message: '长度在 1 到 20 个字符',trigger: 'blur'}
        	],
        	content: [
        		{required: true,message: '内容不能为空',trigger: 'blur'}
        	],
        },
        dialogVisible: false,
        loading: false,
      };
    },
    methods: {
      //关闭页面前的回调
      handleClose(done) {
        if (this.loading) {
          return;
        }
        this.$confirm('确定关闭将不会保存数据？')
          .then(() => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              this.loading = false;
            }, 100);
            this.reset();
          })
          .catch(() => {});
      },
      //关闭会话前重置表单
      reset() {
        this.$refs.form.resetFields();
        this.getArticleById(this.form.id)
      },
      getArticleById(id) {
        this.form.id = id
		var that = this
        this.$http.get("/articleMeg/getArticleInfo?id=" + id).then(function(res) {

          that.form.id = res.data.articleInfo.id;
          that.form.title = res.data.articleInfo.title;
          that.form.author = res.data.articleInfo.author;
		  that.form.content = res.data.articleInfo.content
		  
        })
      },
      //保存修改后的数据
      saveArticle() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            var that = this
            this.$http.post("/articleMeg/updateArticle", this.form).then(function(res) {
              if (res.data.code == 200) {
                that.$message({
                  showClose: true,
                  message: "保存成功",
                  type: 'success'
                });
                //整个页面进行刷新
                window.location.reload();
              }else {
                that.$message({
                  showClose: true,
                  message:"保存失败",
                  type: 'error'
                });
              }
            })
          } else {
            return false;
          }
        })
      }
    }
  };

</script>

<style>

</style>
